<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <title>样书申请</title>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/static/css/public.css?v202204271231">
    <link rel="stylesheet" type="text/css" href="/static/qdxwx/css/global.css?v202204271231">
    <link rel="stylesheet" type="text/css" href="/static/qdxwx/css/web.css?v202204271231">
    <link rel="stylesheet" type="text/css" href="/static/qdxwx/css/theme.css?v202204271231">
    <link rel="stylesheet" type="text/css" href="/static/libs/layui-v2.6.8/css/layui.css" />
    <script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/libs/layui-v2.6.8/layui.js"></script>
    <style>
        .select-hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="pl15 pr15">
    <ul class='l-r-w-Inpt l-r-w-Inpt-tx'>
        <li class="li-one hLh30" style="border-bottom: 1px solid #e2e2e2">
            <tt class="vam fsize14 c-999 f-fM">
                样书申请
            </tt>
        </li>
        <li class="mt20">
            <label class='vam'><b style="color: red;margin-right: 3px"></b>学校名称：</label>
            <input style="width: 525px" placeholder="请输入单位名称" type='text' id='schoolName' name='schoolName' value="" class='lTxt'>
        </li>
        <li class="mt20">
            <label class='vam'><b style="color: red;margin-right: 3px"></b>校内职务：</label>
            <input style="width: 200px" placeholder="如：教务主任、专业课教师" type='text' id="position" name='position' value="" class='lTxt'>
        </li>
        <li class="mt20">
            <label class='vam'><b style="color: red;margin-right: 3px"></b>联系人：</label>
            <input style="width: 200px"  placeholder="请输入联系人姓名" type='text' id='contacts' name='contacts' value="" class='lTxt'>
        </li>
        <li class="mt20">
            <label class='vam'><b style="color: red;margin-right: 3px"></b>手机号：</label>
            <input style="width: 200px"  placeholder="请输入联系电话" type='text' id='mobile' name='mobile' value="" class='lTxt'>
        </li>
        <li class="mt20">
            <label class='vam'><b style="color: red;margin-right: 3px"></b>省市地区：</label>
            <select style="width: 180px" name="provinceId" id="provinceId" class="lTxt" onchange="provinceClick()">
                <option value="0">省份</option>
                <#list provinces as province>
                    <option value="${province.id}">${province.name}</option>
                </#list>
            </select>
            <select style="width: 180px" name="cityId" id="cityId" class="lTxt" onchange="cityClick()">
                <option value="0">城市</option>
            </select>
            <select style="width: 180px" name="areaId" id="areaId" class="lTxt">
                <option value="0">县/区</option>
            </select>
        </li>
        <li class="mt20">
            <label class='vam'><b style="color: red;margin-right: 3px"></b>详细地址：</label>
            <input style="width: 525px" placeholder="如：XXX路XXX小区A301等" type='text' id="address" name='address' value="" class='lTxt'>
        </li>


        <li class='mt30 btn-list tac clear pt15'>
            <label class='vam'>&nbsp;</label>
            <span class='login-btn l-b-small mr20'>
                <input type='button' onclick="save()" value='样书申请'>
            </span>
        </li>
    </ul>
</div>
<script type="text/javascript">

    var bookId = ${book.id}

    function provinceClick() {
        var provinceId = $("#provinceId").val();
        $('#cityId option').each(function () {
            if ($(this).val() !== "0") $(this).remove();
        });
        $('#areaId option').each(function () {
            if ($(this).val() !== "0") $(this).remove();
        });
        setChildAreas(provinceId, 'cityId');
    }

    function cityClick() {
        var cityId = $("#cityId").val();
        $('#areaId option').each(function () {
            if ($(this).val() !== "0") $(this).remove();
        });
        setChildAreas(cityId, 'areaId');
    }

    function setChildAreas(pid, objName) {
        if (pid === "0") return;
        $.ajax({
            type: "GET",
            url: "/ajax/area/children.json?pid=" + pid,
            dataType: "json", async: false,
            success: function (json) {
                var data = json.data;
                var obj = $("#" + objName);
                if (data.length < 1) {
                    obj.append($("<option>").val(pid).text(pid)).val(pid).addClass("select-hide");
                } else {
                    for (i = 0; i < data.length; i++) {
                        obj.append($("<option>").val(data[i].id).text(data[i].name));
                    }
                    obj.removeClass("select-hide");
                }
            },
            error: function (data) {
                layer.msg('error:读取地区数据失败，请重试！', {icon: 2});
            }
        });
    }

    function save() {
        var areaId = $("#areaId").val();
        var address = $("#address").val();
        var schoolName = $("#schoolName").val();
        var contacts = $("#contacts").val();
        var mobile = $("#mobile").val();
        var position = $("#position").val();
        if (areaId < 1) {
            return layer.msg("请选择地区");
        }
        if (address == null || address === "") {
            return layer.msg("请输入详细地址");
        }
        if (schoolName == null || schoolName === "") {
            return layer.msg("请输入学校名称");
        }
        if (position == null || position === "") {
            return layer.msg("请输入校内职务");
        }
        if (contacts == null || contacts === "") {
            return layer.msg("请输入联系人名称");
        }
        if (mobile == null || mobile === "") {
            return layer.msg("请输入联系方式");
        }
        var data = {
            "bookId": bookId,
            "areaId": areaId,
            "address": address,
            "schoolName": schoolName,
            "position": position,
            "contacts": contacts,
            "mobile": mobile
        };
        $.post("/book/require/save.json", data, function (json) {
            if (json.code === 0) {
                return layer.alert("恭喜你，您提交的样书申请信息提交成功，我们会尽快跟您联系请保持手机畅通！", function () {
                    parent.layer.closeAll();
                });
            } else {
                return layer.alert("失败：" + json.msg);
            }
        })
    }
</script>
</body>
</html>